<template>
    <div>
        <Student/>
        <el-button @click="count++">点击{{ count }}</el-button>

        <el-date-picker
            v-model="value1" @change="(val) => {
                console.log(val)
            }"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions1">
        </el-date-picker>

        <el-date-picker
            v-model="value2" @change="handleChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
        </el-date-picker>

        <el-select v-model="value3" @change="handleSelectChange">
            <el-option  v-for="(item, index) in options" :key="index" :label="item.label" :value="item.info"/>
        </el-select>
    </div>
</template>

<script>
const {ref, watch} = Vue;
export default {
    components: {
        Student: () => loadModule('./Components/Student/index.vue', options)
    },
    setup() {
        const count = ref(0)

        function increment() {
            count.value++
        }
        const pickerOptions1 = ref({
            shortcuts: [{
                text: '今天',
                onClick(picker) {
                    picker.$emit('pick', new Date());
                }
            }, {
                text: '昨天',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                }
            }, {
                text: '一周前',
                onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                }
            }]
        })
        const pickerOptions = ref({
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                }
            }]
        })

        const value1 = ref('');
        const value2 = ref('');
        const value3 = ref('');
        const options = ref([
            {label: '张三', info: {age: 24, sex: '男', value: 1}},
            {label: '李四', info: {age: 20, sex: '女', value: 2}},
            {label: '王五', info: {age: 28, sex: '中', value: 3}},
        ])
        /*watch(() => value1.value, val => {
            console.log('valll', val)
        })*/
        watch(() => value2.value, val => {
            console.log('valll', val)
        })

        function handleChange(val) {
            console.log('valll', val)
        }

        function handleSelectChange(info) {
            console.log('info', info)
        }
        return {
            count,
            increment,
            pickerOptions1,
            pickerOptions,
            value1,
            value2,
            value3,
            options,
            handleChange,
            handleSelectChange
        }
    }
}
</script>

<style scoped>

</style>
